@layout("/common/_curd/_container.html"){
<style rel="stylesheet" type="text/css">
	.uploadWrapper{
		width: 100%;
		padding: 10px;
		border: 1px #dadada solid;
	}
	.uploadWrapper .selectFile,
	.uploadWrapper .fileItem .delBtn{
		padding: 5px 15px 5px 15px;
		border: 1px #c4c4c6 solid;
		border-radius: 5px;
		margin-right: 15px;
		background-color: #fff;
		cursor: pointer;
	}
	.uploadWrapper .fileList{
		display: none;
	}
	.uploadWrapper .fileItem{
		width: 100%;
		display: flex;
		padding: 5px 0;
		text-align: center;
		border-bottom: 1px #dadada solid;
	}
	.uploadWrapper .fileItem span:not(.delBtn){
		flex: 1;
		margin-right: 15px;
	}
	.uploadWrapper .fileItem .delBtn{
		padding: 2px 15px 2px 15px;
		background-color: #fff;
		cursor: pointer;
		font-size: 12px;
	}
	.uploadWrapper .fileItem span.status{
		/*color: #449d44;*/
		font-size: 12px;
	}
	.uploadWrapper .selectFile:hover,
	.uploadWrapper .fileItem .delBtn:hover{
		background-color: #eee;
	}
</style>


<form data-url="${basePath}/myproject/checkssave" method="post" class="form-horizontal" role="form">
	<!-- 表单 -->
	<table  class="table table-bordered" >
		<tbody>
		<tr>
			<td>项目名称</td>
			<td colspan="3">
				<input type="text" value="${pro.name!}" readonly="readonly" class="form-control" />
				<input type="hidden" value="${pro.id}" name="checks.p_id">
			</td>
		</tr>
		<tr>
			<td>申报单位</td>
			<td colspan="3">
				<input type="text" value="${dept!}" readonly="readonly"  class="form-control" />
			</td>
		</tr>
		<tr>
			<td>联系人</td>
			<td>
				<input type="text" name="checks.contact" value="${pro.contact!}"  class="form-control" />
			</td>
			<td>联系电话</td>
			<td>
				<input type="text" name="checks.tel" value="${pro.phone!}" placeholder="申报单位"  class="form-control" />
			</td>
		</tr>
		<tr>

			<td>报送日期</td>
			<td>
				<input type="text" name="checks.date" placeholder="报送日期"  class="form-control" />
			</td>
			<td colspan="2">
			</td>
		</tr>
		<tr>
			<td>项目进度</td>
			<td colspan="3">
				<input type="text" name="checks.process" placeholder="项目进度"  class="form-control" />
			</td>
		</tr>
		<tr>
			<td>文件上传</td>
			<td width="900px" colspan="3">
				<div class="uploadWrapper">
					<label for="upload" class="selectFile">
						选择文件<input id="upload" style="display: none;" name="uploadfile" type="file" multiple="true" />
						<input type="hidden" name="checks.files" id="uploadfiles"  class="form-control" />
					</label>
					<span style="font-size: 14px;">提示：每个文件大小不超过10Mb，支持格式为*、*、*</span>
					<ul style="list-style: none;width: 60%;" class="fileList">
						<!--<li class="fileItem">
                            <span>XXXX.doc</span>
                            <span>0.15MB</span>
                            <span class="status">上传成功</span>
                            <span class="delBtn">删除</span>
                        </li>-->
					</ul>
				</div>
				<!--<input id="file_upload" name="uploadfile"  width="100%" type="file" multiple="true" />
                <input type="text" name="projects.annex" id="uploadfiles"  class="form-control" />-->
			</td>
		</tr>
		</tbody>
	</table>


	<!-- 按钮 -->
	@ include("/common/_curd/_btn.html", {btn_save:"新增", btn_close:"关闭"}) {}
</form>
<script type="text/javascript">
	$(document).ready(function(){
		var upload = new UploadFile();
		upload.init();
		function UploadFile() {
			this.fileArr = [];
			this.uploadInput = $("#upload");
			this.fileList = $(".fileList");
			// 初始化
			this.init = function () {
				var _this = this
				this.uploadInput.change(function () {
					if(this.value){
						this.files.length && _this.selectFile.call(_this,this.files);// 此处可以对文件个数作限制，默认不限制
						this.value = "";
					}
				});
			}
		}

		/**
		 * 文件选择并缓存文件信息
		 * fileArr  所选文件数组
		 */
		UploadFile.prototype.selectFile = function (fileArr){
			var _this = this;
			[].slice.call(fileArr).forEach(function (val,index) {
				(function (i) {
					var file = fileArr.item(i);
					_this.fileArr.push(file);
					_this.renderFile.call(_this,file,i);
				})(index);
			});
			this.delFile.call(this);

		}

		/**
		 * 文件信息预览
		 * file  文件
		 */
		UploadFile.prototype.renderFile = function (file,index) {
			var htmlStr = "",
					maxSize = 10,// 支持文件最大10MB
					fileSize = file.size,// 文件大小
					filename = file.name,// 文件名字
					fileType = filename.split('.').pop();// 文件大小
			if(fileType){// 此处是文件类型，可以作对应的限制，例如 fileType==="png"
				if(fileSize <= maxSize*1024*1024){// 文件大小限制
					var size = (fileSize/1024/1024).toFixed(2);
					htmlStr = "<li class='fileItem'><span>"+filename+"</span><span>"+size+"MB</span><span class='status'>未上传</span><span class='delBtn'>删除</span></li>";
					this.fileList.append(htmlStr);
					this.uploadEvent.call(this,file,index);
					index===0&&this.fileList.show();
				}
			}
		}

		// 对所选文件进行删除(上传前)
		UploadFile.prototype.delFile = function () {
			var _this = this;
			$(".fileItem > .delBtn").on("click",function () {
				$(this).parents(".fileItem").remove();
				_this.fileArr.splice($(this).parents(".fileItem").index(),1);console.log(_this.fileArr);
			});
		}

		/**
		 * 文件上传
		 *  file   文件
		 *  index  文件在缓存文件数组中的索引
		 */
		UploadFile.prototype.uploadEvent = function (file,index) {
			var _this = this;
			if(file){
				var formdata = new FormData();
				formdata.append("file",file);
				$.ajax({
					url:"${basePath}/myproject/view",
					type:"POST",
					data:formdata,
					processData: false,
					contentType: false,
					success: function (res) {
						if(res['flag'] === true ) {
							if(index === _this.fileArr.length-1){// 所有文件上传完成
								_this.fileArr = [];// 清空文件缓存数组
								$("#uploadfiles").val(res.names);// 缓存文件名字
							}
							$(".fileItem > .status").text("上传成功");
							$(".fileItem > .status").css("color","#449d44");
						}
					}
				});
			}
		}


		var layerIndex = parent.layer.getFrameIndex(window.name); //获取窗口索引



	});
</script>
@}
